<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>PanPan</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<iframe src="https://ch_wangzi.gitee.io/yanhua/"
				frameborder="0"
				style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;">
		</iframe>
		<ul id="container">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script>
			var container = document.getElementById('container');
			var isDragging = false;
			var startX, startY;
			var currentX = 0, currentY = 0;
			var lastX = 0, lastY = 0;
			// 自动旋转计时器，1秒后执行自动旋转函数
			var autoRotateTimer = setTimeout(startAutoRotate, 1000);

			// 在鼠标按下或触摸开始事件中清除自动旋转计时器
			function startDrag(e) {
				e.preventDefault();
				isDragging = true;
				startX = e.clientX || e.touches[0].clientX;
				startY = e.clientY || e.touches[0].clientY;
				// 检查是否已经有自动旋转计时器，如果有，则清除
				if (autoRotateTimer) {
					clearTimeout(autoRotateTimer);
					autoRotateTimer = null;
				}
			}

			// 鼠标移动或触摸移动事件
			document.addEventListener('mousemove', drag, { passive: false });
			document.addEventListener('touchmove', drag, { passive: false });

			// 鼠标松开或触摸结束事件
			document.addEventListener('mouseup', endDrag);
			document.addEventListener('touchend', endDrag);

			// 开始自动旋转函数
			function startAutoRotate() {
				// 每隔一定时间执行一次自动旋转
				autoRotateTimer = setInterval(function() {
					// 将当前旋转角度增加一定值，可以根据需要调整旋转速度
					currentX += 1;
					// 更新 ul 的 transform 属性实现自动旋转效果
					container.style.transform = 'rotateX(' + (-currentY) + 'deg) rotateY(' + currentX + 'deg)';
				}, 30); // 设置自动旋转间隔时间，可以根据需要调整
			}

			// 在鼠标松开或触摸结束事件中启动自动旋转计时器
			function endDrag(e) {
				e.preventDefault();
				isDragging = false;
				lastX = currentX;
				lastY = currentY;
				// 检查是否已经有自动旋转计时器，如果有，则清除
				if (autoRotateTimer) {
					clearTimeout(autoRotateTimer);
				}
				// 启动自动旋转计时器，1秒后执行自动旋转函数
				autoRotateTimer = setTimeout(startAutoRotate, 1000);
			}

			// 鼠标按下或触摸开始事件
			container.addEventListener('mousedown', startDrag);
			container.addEventListener('touchstart', startDrag);

			function drag(e) {
				e.preventDefault();
				if (!isDragging) return;

				var x = e.clientX || e.touches[0].clientX;
				var y = e.clientY || e.touches[0].clientY;

				var deltaX = x - startX;
				var deltaY = y - startY;

				currentX += deltaX;
				currentY += deltaY;

				container.style.transform = 'rotateX(' + (-currentY) + 'deg) rotateY(' + currentX + 'deg)';

				startX = x;
				startY = y;
			}
		</script>
	</body>
</html>
